<template>
  <div>
    <nav-bar title="我的待办"></nav-bar>
    <div class="maxinBox">
      <form action="/">
        <van-search
          v-model="keyWord"
          show-action
          placeholder="请输入消息名称/类型"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
      <div class="moreHandle">
        <div class="messageTitle">
          <h4>我的代办
          </h4>
        </div>
        <div style="margin-top: 1.25rem;">
          <card @click.native="openDetails(item)" v-for="(item, index) in messageSth" :key="index" :data="item" cardType="message" ></card>
          <div>
            <p style="color: royalblue;">收起</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Card from '../components/Card.vue'
  export default {
    components: {
      Card
    },
    data() {
      return {
        keyWord: '',
        messageSth: [
          {
            timeLimit: '2020-05-21  12:12:12',
            cardTime: '',
            cardNum: '',
            cardTitle: '固定巡检任务',
            cardImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591868469060&di=b51d6761162330726659091d47158a3b&imgtype=0&src=http%3A%2F%2Fwww.zhaji.net.cn%2Fuploads%2Fallimg%2F171107%2F1-1G10G51019A8.jpg',
            cardDesc: '新巡检任务：05/24 12:00:00  1号塔吊巡检点，请前往处理',
          },
          {
            timeLimit: '2020-05-21  12:12:12',
            cardTime: '',
            cardNum: '',
            cardTitle: '异常整改提醒',
            cardImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591868469060&di=b51d6761162330726659091d47158a3b&imgtype=0&src=http%3A%2F%2Fwww.zhaji.net.cn%2Fuploads%2Fallimg%2F171107%2F1-1G10G51019A8.jpg',
            cardDesc: 'XXX任务  05/24 12:00:00  请前往处理',
          },
          {
            timeLimit: '2020-05-21  12:12:12',
            cardTime: '',
            cardNum: '',
            cardTitle: '消息通知',
            cardImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591868469060&di=b51d6761162330726659091d47158a3b&imgtype=0&src=http%3A%2F%2Fwww.zhaji.net.cn%2Fuploads%2Fallimg%2F171107%2F1-1G10G51019A8.jpg',
            cardDesc: 'XXX任务  05/24 12:00:00  已通过审核',
          }
        ]
      }
    },
    methods: {
      // 搜索回车查询
      onSearch(val) {
        this.$toast(val)
      },
      // 搜索取消
      onCancel() {
        this.$toast('取消');
      },
      // 查看任务详情
      openDetails(data) {
        this.$router.push({
          name: 'TaskHandleDetails',
          params: {
            data: data
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .moreHandle{
    padding: $spacing * 3;
    .messageTitle{
      position: relative;
      font-size: (4 / 3) * $fontSize;
      font-weight: $fontWeight;
      h4{
        margin: 0;
      }
    }
  }
</style>
